@import './utilities/borders';

// o mapa utilities, deve armazenar todas as classes utilitarias, com suas devidas configurações.
$utilities: ();
$utilities: map-merge(
  (
    "background-color": (
      class: "bg",
      using_key: true,
      property: background-color,
      values: map-merge($colors, ("white": $white)),
    ),
    "text-align": (
      class: "text",
      using_key: true,
      property: text-align,
      values: center left right justify,
    ),
    "font-style": (
      class: "font-style",
      using_key: true,
      property: font-style,
      values: italic oblique normal initial inherit,
    ),
    "font-weight": (
      class: "bold",
      using_key: true,
      property: font-weight,
      values: $bold_weights,
    ),
    "color": (
      class: "color",
      using_key: true,
      property: color,
      values: map-merge($colors, ("white": $white)),
    ),
    "display": (
      class: "d",
      using_key: true,
      property: display,
      responsive: true,
      values: block inline-block none grid flex table initial inherit, 
    ),
    // spacings utilities classes
    "padding": (
      class: "p",
      using_key: true,
      property: padding,
      values: $spacings_measures,
    ),
    "padding-x": (
      class: "px",
      using_key: true,
      property: padding-left padding-right,
      values: $spacings_measures,
    ),
    "padding-y": (
      class: "py",
      using_key: true,
      property: padding-top padding-bottom,
      values: $spacings_measures,
    ),
    "padding-left": (
      class: "pl",
      using_key: true,
      property: padding-left,
      values: $spacings_measures,
    ),
    "padding-right": (
      class: "pr",
      using_key: true,
      property: padding-right,
      values: $spacings_measures,
    ),
    "padding-top": (
      class: "pt",
      using_key: true,
      property: padding-top,
      values: $spacings_measures,
    ),
    "padding-bottom": (
      class: "pm",
      using_key: true,
      property: padding-bottom,
      values: $spacings_measures,
    ),
    "margin": (
      class: "m",
      using_key: true,
      property: margin,
      values: $spacings_measures,
    ),
    "margin-x": (
      class: "mx",
      using_key: true,
      property: margin-left margin-right,
      values: $spacings_measures,
    ),
    "margin-y": (
      class: "my",
      using_key: true,
      property: margin-top margin-bottom,
      values: $spacings_measures,
    ),
    "margin-left": (
      class: "ml",
      using_key: true,
      property: margin-left,
      values: $spacings_measures,
    ),
    "margin-right": (
      class: "mr",
      using_key: true,
      property: margin-right,
      values: $spacings_measures,
    ),
    "margin-bottom": (
      class: "mb",
      using_key: true,
      property: margin-bottom,
      values: $spacings_measures,
    ),
    "margin-top": (
      class: "mt",
      using_key: true,
      property: margin-top,
      values: $spacings_measures,
      ),
    "margin-auto": (
      class: "m-auto",
      property: margin-left margin-right,
      values: auto,
    ),
    // flex box utilities classes
    "flex": (
      class: "flex",
      property: display,
      values: flex,
    ),
    "justify-content": (
      class: "justify-ct",
      using_key: true,
      responsive: true,
      property: justify-content,
      values: (
        end: flex-end,
        start: flex-start,
        between: space-between,
        center: center,
        around: space-around,
        evenly: evenly,
      ),
    ),
    "align-content": (
      class: "align-ct",
      using_key: true,
      responsive: true,
      property: align-content,
      values: (
        end: flex-end,
        start: flex-start,
        between: space-between,
        center: center,
        around: space-around,
        stretch: stretch,
      ),
    ),
    "align-items": (
      class: "align-its",
      using_key: true,
      responsive: true,
      property: align-items,
      values: (
        end: flex-end,
        start: flex-start,
        center: center,
        stretch: stretch,
        baseline: baseline,
      ),
    ),
    "align-self": (
      class: "align-sf",
      using_key: true,
      responsive: true,
      property: align-self,
      values: (
        auto: auto,
        end: flex-end,
        start: flex-start,
        baseline: baseline,
        center: center,
        stretch: stretch,
      ),
    ),
    "flex-direction": (
      class: "flex",
      using_key: true,
      responsive: true,
      property: flex-direction,
      values: (
        row: row,
        row-reverse: row-reverse,
        column: column,
        column-reverse: column-reverse,
      )
    ),
    "flex-wrap": (
      class: "flex",
      using_key: true,
      responsive: true,
      property: flex-wrap,
      values: (
        wrap: wrap,
        nowrap: nowrap,
        wrap-reverse: wrap-reverse,
      ),
    ),
    "flex-flow": (
      class: "flex-flow",
      using_key: true,
      responsive: true,
      property: flex-flow,
      values: (
        row-wrap: row wrap,
        row-nowrap: row nowrap,
        column: column nowrap,
      ),
    ),
    "flew-grow": (
      class: "flex-grow",
      using_key: true,
      responsive: true,
      property: flex-grow,
      values: 1 2 3 4 5 6 7 8 9 10 11 12,
    ),
    "flew-shrink": (
      class: "flex-shrink",
      using_key: true,
      responsive: true,
      property: flex-shrink,
      values: 0 1 2 3 4 5 6 7 8 9 10 11 12,
    ),
    "order": (
      class: "order",
      using_key: true,
      responsive: true,
      property: order,
      values: 1 2 3 4 5 6 7 8 9 10 11 12,
    ),
     "float": (
      responsive: true,
      property: float,
      values: left right none
    ),
    "overflow": (
      property: overflow,
      values: auto hidden visible scroll,
    ),
    "position": (
      property: position,
      values: static relative absolute fixed sticky
    ),
    // sizings utilities classes
    "width": (
      using_key: true,
      property: width,
      responsive: true,
      class: "w",
      values: $sizings,
    ),
    "max-width": (
      property: max-width,
      class: "mw",
      values: (100: 100%)
    ),
    "viewport-width": (
      property: width,
      class: "vw",
      values: (100: 100vw)
    ),
    "min-viewport-width": (
      property: min-width,
      class: "min-vw",
      values: (100: 100vw)
    ),
    "height": (
      using_key: true,
      property: height,
      class: "h",
      values: $sizings,
    ),
    "max-height": (
      property: max-height,
      class: "mh",
      values: (100: 100%)
    ),
    "viewport-height": (
      property: height,
      class: "vh",
      values: (100: 100vh)
    ),
    "min-viewport-height": (
      property: min-height,
      class: "min-vh",
      values: (100: 100vh)
    )
  ), $utilities
);

@include include_utilities();
